import { DragOutlined } from '@ant-design/icons';
import { useMemo, useState } from 'react';

import type { YmDataNode } from 'ym-design';
import { YmTree } from 'ym-design';

const DEFAULTTREEDATA: YmDataNode[] = [
  {
    key: '0',
    title: 'parent 0',
    children: [
      {
        key: '0-0',
        title: 'parent 0-0',
        children: [{ key: '0-0-0', title: 'leaf 0-0-0', isLeaf: true }],
      },
      {
        key: '0-1',
        title: 'parent 0-1',
        children: [
          {
            key: '0-1-0',
            title: 'leaf 0-1-0',
            disableCheckbox: true,
            isLeaf: true,
          },
          { key: '0-1-1', title: 'leaf 0-1-1 disableDrag', isLeaf: true },
          { key: '0-1-2', title: 'leaf 0-1-2 disableDrop', isLeaf: true },
          { key: '0-1-3', title: 'leaf 0-1-3', isLeaf: true },
          { key: '0-1-4', title: 'leaf 0-1-4', isLeaf: true },
        ],
      },
    ],
  },
];

function YmTreeDragAndDrop() {
  const [treeData, setTreeData] = useState<YmDataNode[]>(DEFAULTTREEDATA);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

  const handleDrop = ({ event, node, dragNode }: any) => {
    const dropKey = node.key;
    const dragKey = dragNode.key;

    const loop = (data: YmDataNode[], key: string, callback: Function) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          callback(item, index, arr);
          return;
        }
        if (item.children) {
          loop(item.children, key, callback);
        }
      });
    };

    const data = [...treeData];

    // Find dragObject
    let dragObj: YmDataNode;
    loop(
      data,
      dragKey,
      (item: YmDataNode, index: number, arr: YmDataNode[]) => {
        dragObj = item;
        arr.splice(index, 1);
      },
    );

    loop(
      data,
      dropKey,
      (item: YmDataNode, index: number, arr: YmDataNode[]) => {
        arr.splice(index + 1, 0, dragObj);
      },
    );

    console.log('--YmTreePage--onDrop--data--:', data);

    setTreeData([...data]);
  };

  const handleDragEnd = ({ event, node, dragNode }: any) => {
    console.log('--YmTreePage--handleDragEnd--');
  };

  const dragableConfig = useMemo(() => {
    return {
      icon: <DragOutlined />,
      nodeDraggable: (node: YmDataNode) => {
        return node.key === '0-1-1' ? false : true;
      },
    };
  }, []);

  return (
    <div className="tree-page">
      <YmTree
        selectedKeys={selectedKeys}
        treeData={treeData}
        defaultExpandedKeys={['0-1-1']}
        draggable={dragableConfig}
        switcherIcon="＋"
        cannotDrop={(node: YmDataNode) => {
          return node.key === '0-1-2' ? true : false;
        }}
        onDrop={handleDrop}
        onDragEnd={handleDragEnd}
        onSelect={(newSelectedKeys) => {
          console.log('--DragAndDrop--newSelectedKeys--:', newSelectedKeys);
          setSelectedKeys(newSelectedKeys);
        }}
      />
    </div>
  );
}

export default YmTreeDragAndDrop;
